<template>
  <div class="box">
    <!-- 首页 分类 购物 个人 -->

    <div class="dv">
      <div>
        <img src="../assets/img/首页.png" alt="" class="img1" @click="gohome" />
        <span>首页</span>
      </div>
      <div>
        <img
          src="../assets/img/分类.png"
          alt=""
          class="img1"
          @click="goclassification"
        />
        <span>分类</span>
      </div>
      <div>
        <img
          src="../assets/img/购物车.png"
          alt=""
          class="img1"
          @click="gowuche"
        />
        <span>购物</span>
      </div>
      <div>
        <img
          src="../assets/img/个人.png"
          alt=""
          class="img1"
          @click="gopersonal"
        />
        <span>个人</span>
      </div>
    </div>
    <!-- <van-tabbar v-model="active" active-color="red" inactive-color="#000">
      <van-tabbar-item icon="van-icon van-icon-wap-home-o" to="/home"
        >首页</van-tabbar-item
      >
      <van-tabbar-item icon="van-icon van-icon-apps-o" to="/home"
        >分类</van-tabbar-item
      >
      <van-tabbar-item icon="van-icon van-icon-shopping-cart-o" to="/home"
        >购物</van-tabbar-item
      >
      <van-tabbar-item icon="van-icon van-icon-user-o" to="/personal"
        >个人</van-tabbar-item
      >
    </van-tabbar> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectIndex: 0,
      active: 0,
    };
  },
  methods: {
    goclassification() {
      this.$router.push("/ification");
    },
    gohome() {
      this.$router.push("/home");
    },
    gowuche() {
      this.$router.push("/Shopping");
    },
    gopersonal() {
      this.$router.push("/personal");
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 3rem;
  border-radius: 1px solid blue;
  position: fixed;
  left: 0px;
  bottom: 0px;
  background: white;
  font-size: 0.7rem;

  .dv {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    div {
      width: 22%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      img {
        width: 65%;
        height: 50%;
      }
    }
  }
}
</style>